<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts'
import { Flag, User } from '@element-plus/icons-vue'
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
// let internalInstance = getCurrentInstance();
// let echarts = internalInstance.appContext.config.globalProperties.$echarts;
import { useEchartsStore } from '@/stores'
import { storeToRefs } from 'pinia';
const echartsStore = useEchartsStore()
const { membersDataArr, membersDataMap } = storeToRefs(echartsStore)
echartsStore.getMembersCount()
onMounted(() => {

    // 直线图实例参数
    const lineOption = {
        title: {
            text: '会员季度分布情况',
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: membersDataArr.value.keys
        },
        yAxis: {
            type: 'value'
        },
        // 元素标签 也就是分类标签
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '会员',
                data: membersDataArr.value.values,
                type: 'line',
            },
            {
                name: '会员',
                data: membersDataArr.value.values,
                type: 'bar'
            },
            {
                name: '非会员',
                data: [5,4,2,6],
                type: 'line',
            },
            {
                name: '非会员',
                data: [5,4,2,6],
                type: 'bar'
            }
        ]
    };
    const line = document.getElementById('line');
    const lineChart = echarts.init(line); // 初始化echarts实例
    // 设置实例选项参数
    lineChart.setOption(lineOption);


    // 饼图实例参数
    // console.log(membersDataMap.value)
    const pieOption = {
        title: {
            text: '会员季度分布情况表',
            left: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
        // 元素标签 也就是分类标签
        legend: {
            top: '7%',
            left: 'center',
        },
        series: [
            {
                name: '各个季度会员人数占比',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center',
                    formatter: [  // 格式化数值百分比输出
                        '{d}%',
                        '{b}'
                    ].join('\n'),

                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: membersDataMap.value
            }
        ]
    };
    const pie = document.getElementById('pie');
    const pieChart = echarts.init(pie); // 初始化echarts实例
    // 设置实例选项参数
    pieChart.setOption(pieOption);
});
</script>
<template>
    <div style="margin: 10px 0 0 20px; ">
        <el-row :gutter="10" style="margin-bottom: 40px;">
            <el-col :span="6">
                <el-card style="height: 90px;">
                    <div style="display:flex;align-items: center;color: #409EFF;"><el-icon :size="20"
                            style="margin-right: 5px;">
                            <User />
                        </el-icon>用户总数</div>
                    <div style="margin: 10px 20px;text-align: right;"><el-text size="large" type="primary">{{
                        membersDataArr.values.reduce((prev, item) => prev += item, 0) }}</el-text>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="height: 90px;">
                    <div style="display:flex;align-items: center;color: rgb(103, 194, 58);"><el-icon :size="20"
                            style="margin-right: 5px;">
                            <User />
                        </el-icon>会员总数</div>
                    <div style="margin: 10px 20px;text-align: right;"><el-text size="large" type="success">{{
                        membersDataArr.values.reduce((prev, item) => prev += item, 0) + 1 }}</el-text>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="height: 90px;">
                    <div style="display:flex;align-items: center;color: rgb(230, 162, 60);"><el-icon :size="20"
                            style="margin-right: 5px;">
                            <Flag />
                        </el-icon>总销售额</div>
                    <div style="margin: 10px 20px;text-align: right;"><el-text size="large" type="warning">￥28987</el-text>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="height: 90px;">
                    <div style="display:flex;align-items: center;color: rgb(245, 108, 108);"><el-icon :size="20"
                            style="margin-right: 5px;">
                            <Flag />
                        </el-icon>会员盈利</div>
                    <div style="margin: 10px 20px;text-align: right;"><el-text size="large" type="danger">￥2887</el-text>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div ref="line" id="line" :style="{ width: '550px', height: '350px' }"></div>
            </el-col>
            <el-col :span="12">
                <div ref="pie" id="pie" :style="{ width: '550px', height: '350px' }"></div>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped></style>